<template>
	<view class="mainPage">
		<view class="tab-nav">
			<view class="tab-nav-right"><view>{{currentTime}}</view>
			<u-image width="32rpx" height="32rpx" @tap="openData"
					:src="appletImgUrl+'dateIcon.png'"></u-image></view>
		</view>
       
		<view class="data-list">
			<view class="list-li" v-for="(item,index) in recordList" :key="index">
				<view class="li weight">
					<view class="li-left-top">{{item.subsidyTypeDesc}}</view>
					<view class="li-right-top">
						{{item.subsidyAmount}}
					</view>
				</view>
				<view class="li">
					<view class="li-left-top">订单号</view>
					<view class="li-right-top">
						{{item.orderNumber}}
					</view>
				</view>
				<view class="li">
					<view class="li-left-top">时间</view>
					<view class="li-right-top">
						{{item.dateStr}}
					</view>
				</view>
				
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-calendar :show="showDate" mode="range" @confirm="confirm" :allowSameDay="true"  @close="closeDate"></u-calendar>
	</view>
</template>

<script>
import {
		imgUrl,
		appletImgUrl
	} from "@/common/config.js"
	import {
		getStoreData,
		setStoreData,
		httpPost,
		httpGet
	} from "@/utils/http.js";
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				show: false,
				mode: "range",
				couponInfo:{
					currentAmount:0,
					userId:"",
					weeksAmount:0
				},
				recordList:[],
				queryData:{
					 orderType:"",
					 endTime:"",
					 startTime:""
				},
				status:"loadmore",
				pageTotal:1,
				navList:[{name:"按日",type:"1"},{name:"按月",type:"2"}],
				cur:0,
				currentTime:"",//今天
				timeType:"1",//日期时间类型
				public:{
					 startTime:"",
					 endTime:""
				},
				showDate:false
			}
		},
		onLoad(option){
			this.queryData.orderType=option.subsidyType;
		   this.getTime()
		   this.recordList=[];
		 
		   this.getMiHuiRecordList();
		},
		onShow() {
		},
		onReachBottom(){
			if(this.queryData.pageNo<this.pageTotal){
				this.status = 'loading';
				this.queryData.pageNo++
				this.getMiHuiRecordList();
			}else{
				this.status = 'nomore'
			}
			
		},
		onPullDownRefresh(){
			
		},
		methods: {
			getTime(){
				let now = new Date();
				let year = now.getFullYear(); // 年
				let month = now.getMonth() + 1; // 月
				let date = now.getDate(); // 日
				var lastDate = new Date(year, month , 0).getDate(); //获取当月最后一日
				if(month<10){
							   month="0"+month;
				}
				if(date<10){
							   date="0"+date;
				}
				//默认按日(今天)
				if(this.timeType==1){
					this.public.startTime=year+"-"+month+"-"+date+" 00:00:00";
					this.public.endTime=year+"-"+month+"-"+date+" 23:59:59";
					this.currentTime=month+"月"+date+"日"+" 今天";
				}else{
					this.public.startTime=year+"-"+month+"-01"+" 00:00:00";
					this.public.endTime=year+"-"+month+"-"+lastDate+" 23:59:59";
					this.currentTime=year+"-"+month+"-01"+"至"+year+"-"+month+"-"+lastDate;
				}
				
				this.queryData.startTime=this.public.startTime;
				this.queryData.endTime=this.public.endTime;
				
			},
			openData() {
				this.showDate = true;
			},
			confirm(e) {
				console.log(e);
				this.public.startTime=e[0]+' '+'00:00:00';
				this.public.endTime=e[e.length-1]+' '+'23:59:59';
				
				this.queryData.startTime=this.public.startTime;
				this.queryData.endTime=this.public.endTime;
				this.currentTime=e[0]+"至"+e[e.length-1];
				this.recordList=[];
				this.getMiHuiRecordList();
			},
		
			getMiHuiRecordList(){
				let that=this;
				httpGet("/api/sellerordersubsidysummary/detailSubsidyByTime?orderType="+that.queryData.orderType+'&startTime='+this.queryData.startTime+'&endTime='+this.queryData.endTime)
					.then((res) => {
						console.log(res)
						that.RecordList=res.data;
					}).catch((e) => {
						
					});
			},
			
			closeDate(){
				this.showDate = false;
			}
		}
	}
</script>

<style lang="scss">
	.mainPage{
		background-color: #efefef;
		height: calc(100vh - 90rpx);
		padding-top: 20rpx;
	}
	.tab-nav{
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 20rpx;
		
		.tab-nav-left{
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			font-size: 30rpx;
			
			.active{
				background: linear-gradient(to right,#FB8C34,#FF1C60);
				color: #fff;
			}
			.tab-nav-li{
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				border-radius: 30rpx;
			}
			
		}
		.tab-nav-right{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 24rpx;
			background-color: #f7b0c5;
			line-height: 60rpx;
			color: #FF1E60;
			border: none;
			padding-left: 20rpx;
			padding-right: 20rpx;
		}
		
	}
	.data-list {
		padding-left: 30rpx;
		padding-right: 30rpx;

		.list-li {
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			
			margin-bottom: 20rpx;
			.li{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 24rpx;
			}
			.weight{
				font-weight: bold;
				.li-right-top{
					color: #FF1E60;
				}
			}
			.li-left{
				width: 65%;
				.li-top {
				font-size: 30rpx;
				font-weight: bold;	
				margin-bottom: 20rpx;
				}
				.li-bottom{
					font-size: 24rpx;
					color: #AAAAAA;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
			}
			.li-right{
				padding-top: 26rpx;
			}
		}
		.list-li .li:nth-child(2){
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>